<template>
    <div class="tableviewContainer">
        <SysTable
            title="测试报表"
            :columnData="columnData"
            :currentPage="params.current"
            :total="params.total"
            :pageSize="params.pageSize"
            :tableData="tableData"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @select-all="handleSelectionChange"
        >
            <template v-slot:btn>
                <div class="btnRow">
                    <el-button type="primary" @click="steve">查询</el-button>
                </div>
            </template>
            <template v-slot:inputRow>
                <div>
                    姓名:<el-input style="width:180px" v-model="form.name" placeholder="请输入姓名"></el-input>
                    性别:<el-input style="width:180px" v-model="form.gender" placeholder="请选择性别"></el-input>
                </div>
            </template>
            <template v-slot:action>
                <div>
                    <el-button type="danger" @click="steve">删除</el-button>
                </div>
            </template>
        </SysTable>
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue"
import SysTable from "@/components/systable/index.vue"
interface ty {
    props: string,
    label: string,
    index?: number,
    slot?:string
}
type slotType = 'image' | 'fitler'
export default defineComponent({
    components: {
        SysTable
    },
    setup() {
        let form = reactive({
            name: "",
            gender: ""
        })
        const params = reactive({
            current: 1,
            pageSize: 10,
            total: 40
        })
        const tableData = ref([{
            name: "张三",
            gender: "男",
            cardId: '4641343212111',
            avatar:'https://img2.baidu.com/it/u=1997216360,2481463155&fm=26&fmt=auto'
        }, {
            name: "李四",
            gender: "女",
            cardId: '3454356756445'
        }, {
            name: "",
            gender: "",
            cardId: ''
        }, {
            name: "",
            gender: "",
            cardId: ''
        },
        ])

        const columnData = reactive([
            {
                props: "name",
                label: '姓名',
                type: '',
                show: true
            },
            {
                props: "gender",
                label: '性别',
                show: true
            },
            {
                props: 'avatar',
                label: '头像',
                show: true,
                slot:'image'
            },
            {
                props: 'cardId',
                label: '身份证',
                show: true
            },{
                props: 'action',
                label: '操作',
                show: true,
                slot:'action'
            },
        ])
        const multipleSelection = ref([])
        const steve = () => { console.log(form) }
        const handleSizeChange = (size: number) => { console.log('size', size) }
        const handleCurrentChange = (current) => { console.log('current', current) }
        const handleSelectionChange = (all) => { multipleSelection.value = all, console.log(multipleSelection.value) }
        return {
            columnData,
            steve,
            params,
            tableData,
            handleSizeChange,
            handleCurrentChange,
            form,
            handleSelectionChange
        }
    }
})
</script>

<style lang="scss">
.tableviewContainer {
    padding: 20px;
    .btnRow {
        margin: 20px 0;
    }
    .pagnitionContainer {
        margin-top: 20px;
    }
}
</style>